<template>
    <div class="box">
        <div class="time-img">
            <img src="../assets/icons/time.svg" style="width: 200px;height:100px" alt="time">
        </div>
        <div class="log-box">
            <div >
                <p>{{log.create_time}}</p>
     
            <span style="font-weight: bolder;">{{log.title}}</span>
            </div>
            <div  class="log-body">
                <span>{{log.body}}</span>
            </div>
            <div class="end-img">
                <img v-if="img_url" :src="log.cover_image"  alt="封面"/>
                <img v-else src="../assets/icons/favsion.png" alt="封面"/>
            </div>

        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, defineProps,onMounted } from "vue"
const props= defineProps(["log"])
const img_url = ref(true)

onMounted(() => {
    if( props.log.cover_image.length<8){
        img_url.value =false
    }
 
    
})



</script>
<style lang="scss" scoped>

@media screen and (max-width: $passlink-media-max-width-5) {
    .box{
        width: 100%;
    }
    .time-img{
      display: none;
    }
    .end-img{
        
    }
    .log-body{
        display: none;
    }
  }
.box {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    .log-box {
        width: 800px;
        height: 100px;
        box-sizing: border-box;
        background: rgb(36, 36, 36);
        border-bottom: 2px solid rgb(251, 255, 54);
        display: flex;
        justify-content: space-evenly;
        color: $passlink-font-color-white;
        word-wrap: break-word;
        align-items: center;
        padding: 10px;

        p {
            font-size: $passlink-font-size18;
            font-weight: bolder;
            color: $passlink-font-color-yellow;
           
        }

        span {
            font-size: $passlink-font-size14;
            font-weight: lighter;
        }

        img {
            width: 80px;
            height: 80px;
            border-radius: 5px;
        }
        .log-body{
           width: 400px;
        }
    }

}</style>
